<template>
    <div class="statistics-staff-page">
        <el-card shadow="never" class="filter" v-loading="loading">
            <div class="top flex items-center justify-between mb-4">
                <div class="user-info flex items-center">
                    <div class="text-lg mr-4 font-semibold">{{ userInfo.name }}</div>
                    <div class="text-sm">{{ userInfo.position }}</div>
                    <el-button
                        v-if="version === 'v2'"
                        @click="toOldVersion"
                        type="text"
                        class="old-version self-end">查看该帐号 2021年5月31日 以前的数据 可临时访问这里</el-button>
                </div>
                <el-date-picker
                    class="ml-auto mr-2"
                    v-model="date"
                    type="month"
                    value-format="timestamp"
                    :picker-options="endDateOpt"
                    placeholder="选择日期">
                </el-date-picker>
                <el-button :disabled="!date" @click="onExport" type="primary">导出</el-button>
            </div>

            <div class="pb-20 border-t learn">
                <div class="text-gray-600 text-xs text-bold self-end pt-2 mb-10" >
                    <p v-if="version === 'v2'">* 用户登录使用数据来自角色地图数据分析模块3.0版，统计起始时间 2021年6月1日</p>
                </div>
                <div class="left-icon big-title">历史累计使用时长概览</div>
                <div class="flex items-center content">
                    <div class="item border-r">
                        <div class="number">{{ cumulativeUse.user_learn_total }}</div>
                        <div class="tip">
                            累计时长
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                content="该账号在视频、⽂章等学习内容上观看或停留的历史累计时⻓。"
                                placement="top-start">
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item border-r">
                        <div class="number">{{ cumulativeUse.max_learn }}</div>
                        <div class="tip">
                            {{ version === 'v1' ? '单次最长' : '最长单天学习时长' }}
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    历史上一天的最长学习时间。即该账号在登录状态下，最长的一次，
                                    在一天内累计进行了视频、文章等学习内容观看或停留的时间。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item border-r">
                        <div class="number">{{ cumulativeUse.last_login_at }}</div>
                        <div class="tip">
                            最近一次学习时间
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    该账号最近⼀次在登录状态下使⽤，并进⾏了视频、⽂章等学习内容观看或停留操作的⽇期。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item border-r">
                        <div class="number">{{ cumulativeUse.first_learn_at }}</div>
                        <div class="tip">
                            首次登录
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                content="该账号⾸次登录的⽇期"
                                placement="top-start">
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item">
                        <div class="number">{{ cumulativeUse.active_day }}</div>
                        <div class="tip">
                            {{ version === 'v1' ? '累计次数' : '累计使用天数' }}
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                content=""
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    该账号累计使⽤的天数。在⼀天时间内，进⾏过⾄少⼀次视频、⽂章等学习内容的观看或停留操作，被记为使⽤了1天。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-10 pb-20 border-t learn">
                <div class="left-icon big-title flex items-center">
                    <div>历史累计学过学习节点概览<span v-loading="chartShow"></span></div>
                </div>
                <div class="flex items-center content">
                    <div class="item border-r">
                        <div class="number">{{ learnedNode.have_learned_num }}</div>
                        <div class="tip">
                            累计学过
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    该账号在视频类学习内容节点上点击过播放或在⽂章类学习内容节点上滚动浏览或滞留停留了⼀定时间后，会被认为学习过。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item border-r">
                        <div class="number">{{ learnedNode.completion_num }}</div>
                        <div class="tip">
                            累计标记学完
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    标记完成仅是，将视频或⽂章类学习节点上的完成按钮，⼈⼯点击标记为完成。与视频播放⻓度或⽂章阅读次数等⽆关。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                    <div class="item">
                        <div class="number">{{ learnedNode.section_num }}</div>
                        <div class="tip">
                            共有可学内容
                            <el-tooltip v-if="version === 'v2'"
                                class="tip-item"
                                effect="dark"
                                placement="top-start">
                                <div class="tip-content" slot="content">
                                    ⽬前⻆⾊地图服务共包含多少个已经上线且拥有学习内容的视频或⽂章类学习节点。包括msup官⽅提供的以及该账号所在企业内部⾃建的学习节点。
                                </div>
                                <span class="el-icon-question"></span>
                            </el-tooltip>
                        </div>
                    </div>
                </div>
                <div class="mt-20 pl-10 flex flex-wrap">
                    <div class="chart-item mr-4" v-for="(item, i) in learnedNodeCharts" :key="i">
                        <div class="text-sm">{{ item.name }} 通道节点</div>
                        <div class="echart">
                            <div class="echarts" :id="`echarts${i}`"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pt-10 pb-20 border-t learn">
                <div class="left-icon big-title flex items-center">
                    累计标记完成的学习节点清单
                    <el-tooltip v-if="version === 'v2'"
                        class="tip-item"
                        effect="dark"
                        content="该账号下，所有被⼿动标记为完成的学习节点清单。"
                        placement="top-start">
                        <span class="el-icon-question"></span>
                    </el-tooltip>
                </div>
                <div class="mt-20 pl-10">
                    <div class="our-table">
                        <el-row class="header flex items-center border-b">
                            <el-col :span="4" class="index column flex items-center">
                                <div class="text-sm w-full text-center font-semibold">序号</div>
                            </el-col>
                            <el-col :span="20" class="title flex items-center justify-center">
                                <div class="flex items-center font-semibold text-center">清单</div>
                            </el-col>
                        </el-row>
                        <div v-if="completedNode && completedNode.length">
                            <el-row
                                v-for="item in completedNode"
                                :key="item.no"
                                class="our-table-body flex items-center border-b">
                                <el-col :span="4" class="index column flex items-center">
                                    <div class="w-full text-center">{{ item.no }}</div>
                                </el-col>
                                <el-col :span="20" class="column flex items-center">
                                    <div class="flex items-center">
                                        {{ item.content }}
                                    </div>
                                </el-col>
                            </el-row>
                            <div
                                v-if="completedAllData && completedAllData.length > 10
                                    && completedNode.length < completedAllData.length"
                                class="our-table-body-last el-icon-caret-bottom">
                                <el-button @click="setCompleteList" type="text">展开全部</el-button>
                            </div>
                        </div>
                        <div v-else class="our-table-empty border-b text-sm">暂无数据</div>
                    </div>
                </div>
            </div>

            <div class="pt-10 pb-20 border-t learn">
                <div class="left-icon big-title">
                    学习日历
                    <el-tooltip v-if="version === 'v2'"
                        class="tip-item"
                        effect="dark"
                        content="该账号，每⽉每天在视频、⽂章等学习内容上观看或停留的时间记录。"
                        placement="top-start">
                        <span class="el-icon-question"></span>
                    </el-tooltip>
                </div>
                <div class="flex items-center calendar-box content pt-6">
                    <el-calendar id="calendar" v-model="years" :first-day-of-week="7">
                        <template
                            slot="dateCell"
                            slot-scope="{data}">
                            <div class="cell-icon relative w-full">
                                <div class="text-center">{{ data.day.split('-')[2] }}</div>
                                <div
                                    class="cell-icon-box mt-2 flex flex-col justify-center items-center"
                                    v-html="getMinutes(data.day)">
                                </div>
                            </div>
                        </template>
                    </el-calendar>
                </div>
                <div class="mt-12 flex flex-col">
                    <div class="title-content">
                        <div class="title flex items-center">
                            <div class="font-semibold mr-4">{{ themeYears.split('/')[0] }}年</div>
                            <div class="flex justify-center items-center">
                                <i
                                    @click="dateChange('pre', 'theme')"
                                    class="el-icon-arrow-left mr-2 cursor-pointer"></i>
                                <span class="text-blue-500 w-12 text-center font-semibold">
                                    {{ +themeYears.split('/')[1] }}月
                                </span>
                                <i
                                    @click="dateChange('next', 'theme')"
                                    class="el-icon-arrow-right ml-2 cursor-pointer"></i>
                            </div>
                            <div class="ml-4 text-gray-800">
                                学习涉及的主题
                                <el-tooltip v-if="version === 'v2'"
                                    class="tip-item"
                                    effect="dark"
                                    content="该账号，在当⽉内，学过的学习节点，主要涉及的⼯作场景主题及学习路径等"
                                    placement="top-start">
                                    <span class="el-icon-question"></span>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix">
                        <el-card class="mt-6 float-left">
                            <div class="flex flex-wrap" v-if="themeDetail.length">
                                <div class="learn-theme mt-2" v-for="(item, i) in themeDetail" :key="i">
                                    <div class="title left-icon">{{ item.name }}</div>
                                    <div
                                        class="mt-4 text-gray-500"
                                        v-if="item.course_names && item.course_names.length">
                                        <p class="mb-2" v-for="(val, v) in item.course_names" :key="v">
                                            {{ val }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="text-sm" v-else>暂无数据</div>
                        </el-card>
                    </div>
                </div>

                <div class="mt-12 flex flex-col" v-for="(item, i) in learnDetail" :key="i">
                    <div class="title-content">
                        <div class="title flex items-center">
                            <div class="font-semibold mr-4">{{ item.years.split('/')[0] }}年</div>
                            <div class="flex justify-center items-center">
                                <i
                                    @click="dateChange('pre', 'detail', i)"
                                    class="el-icon-arrow-left mr-2 cursor-pointer"></i>
                                <span class="text-blue-500 w-12 text-center font-semibold">
                                    {{ +item.years.split('/')[1] }}月
                                </span>
                                <i
                                    @click="dateChange('next', 'detail', i)"
                                    class="el-icon-arrow-right ml-2 cursor-pointer"></i>
                            </div>
                            <div class="ml-4 text-gray-800">
                                {{ item.title }}
                                <el-tooltip v-if="version === 'v2'"
                                    class="tip-item"
                                    effect="dark"
                                    :content="item.content"
                                    placement="top-start">
                                    <span class="el-icon-question"></span>
                                </el-tooltip>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix">
                        <el-card class="mt-6 float-left">
                            <div>{{ item.course_num }}个内容，涉及{{ item.label_num }}个主题</div>
                            <el-button
                                type="text"
                                class="text-blue-500 text-xs mt-2"
                                @click="onDetail(item)">查看详情</el-button>
                        </el-card>
                    </div>
                </div>
            </div>
        </el-card>
        <div class="text-center mt-4">
            <el-button @click="$router.back()">返 回</el-button>
        </div>
    </div>
</template>

<script>
import { Calendar } from 'element-ui';
// import echarts from 'echarts';
const echarts = require('echarts');

export default {
    components: {
        ElCalendar: Calendar,
    },
    data() {
        return {
            version: 'v1', // 版本 v1 v2

            id: '',
            loading: false,
            active: 'one',
            userInfo: {},
            cumulativeUse: {},
            date: '',

            learnedNode: {},
            learnedNodeCharts: [],

            completedType: 1,
            completedNode: [],
            completedAllData: [],

            years: '2021/1/1',
            calendarData: [],
            themeYears: '2021/1/1',
            themeDetail: [],
            learnDetail: [
                {
                    title: '完成的学习节点',
                    type: 'node',
                    years: '2021/1/1',
                    course_num: 0,
                    label_num: 0,
                    content: '该账号，在当⽉内，所有被⼿动标记完成的学习节点清单以及这些节点涉及的⼯作场景学习主题。',
                },
                {
                    title: '学习了这些',
                    type: 'learned',
                    years: '2021/1/1',
                    course_num: 0,
                    label_num: 0,
                    content: '该账号，在当⽉内，所有学过的学习节点清单以及这些节点涉及的⼯作场景学习主题。',
                },
                {
                    title: '做了这些工作场景的思考题',
                    type: 'thinkTopic',
                    years: '2021/1/1',
                    course_num: 0,
                    label_num: 0,
                    content: '该账号，在当⽉内，做了哪些学习主题相关的作业思考题。',
                },
                {
                    title: '做了这些工作场景的自评',
                    type: 'selfEvaluation',
                    years: '2021/1/1',
                    course_num: 0,
                    label_num: 0,
                    content: '该账号，在当⽉内，做了哪些学习主题相关的⾃评题',
                },
            ],
            // 柱状图参数
            options: {
                tooltip: {},
                legend: {},
                xAxis: {
                    data: ['累计学过', '累计学完', '共有'],
                    axisTick: {
                        alignWithLabel: true,
                    },
                },
                yAxis: {},
                series: [{
                    type: 'bar',
                    data: [
                        { value: '5', label: {color: 'rgb(249, 191, 91)'} },
                        { value: '20', label: {color: 'rgb(91, 211, 249)'} },
                        { value: '60', label: {color: 'rgb(64, 158, 255)'} },
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, // 开启显示
                                position: 'top', // 在上方显示
                                formatter: function (params) {
                                    return `${params.value} 个`;
                                },
                                textStyle: {
                                    color: 'black',
                                    fontSize: 12,
                                },
                            },
                            color: (params) => {
                                const colorList = ['rgb(249, 191, 91)', 'rgb(91, 211, 249)', 'rgb(64, 158, 255)'];
                                return colorList[params.dataIndex];
                            },
                        },
                    },
                }],
            },
            chartShow: false,

            endDateOpt: {
                disabledDate: (time) => {
                    if (this.version === 'v1') {
                        return time.getTime() > new Date('2021/5');
                    }
                    return time.getTime() < new Date('2021/6');
                },
            },
        };
    },
    methods: {
        fetchData(url, form, dataText, fn) {
            this.loading = true;
            API.get(url, {params: {form}}).then((res) => {
                if (dataText) this[dataText] = res;
                if (typeof fn === 'function') fn(res);
            }).finally(() => {
                this.loading = false;
            });
        },
        onDetail(row) {
            const timestamp = new Date(row.years).getTime();
            const version = this.version;
            this.$router.push({
                name: `Staff.Detail${version === 'v2' ? '.V2' : ''}`,
                params: {
                    v: version,
                    id: this.id,
                },
                query: {
                    type: row.type,
                    timestamp,
                },
            });
        },

        getData() {
            const version = this.version === 'v2' ? `${this.version}-` : '';
            this.fetchData(`user/${this.id}`, {}, 'userInfo');
            this.fetchData(`statistics/user/${version}use-duration/${this.id}`, {}, 'cumulativeUse');

            this.chartShow = true;
            this.fetchData(`statistics/user/${version}learned-duration/${this.id}`, {}, 'learnedNode', res => {
                const list = res.passage_node_responses || [];
                this.learnedNodeCharts = list;
                this.$nextTick(() => {
                    this.echartsLoopInit();
                });
            });
            this.getCompletedList();
            this.getYearsDetail();
        },
        // 学习节点清单
        getCompletedList() {
            const id = this.id;
            const version = this.version === 'v2' ? `${this.version}-` : '';
            this.fetchData(`statistics/user/${version}completed-inventory/${id}`, {}, '', res => {
                const data = res || [];
                this.completedAllData = data;

                let list = [];
                if (data.length > 10) {
                    list = data.slice(0, 10);
                } else list = data;
                this.completedNode = list;
            });
        },
        setCompleteList() {
            this.completedNode = this.completedAllData;
        },

        // 日历
        getYearsDetail() {
            const time = new Date(this.years).getTime();
            this.getYearsData('home', time, res => {
                this.calendarData = res.record_list || [];
                const learnNode = document.querySelector('.el-calendar_title-mask .learn-time');
                learnNode.innerText = res.title;
            });
        },

        // 主题
        getTheme() {
            const time = new Date(this.themeYears).getTime();
            this.getYearsData('theme', time, res => {
                this.themeDetail = res || [];
            });
        },

        getYearsData(type, timestamp, fn) {
            this.loading = true;
            API.get(`statistics/user/use-record/${type}/${timestamp}/${this.id}`).then(res => {
                if (typeof fn === 'function') fn(res);
            }).finally(() => this.loading = false);
        },

        // 详细学习使用记录，部分
        getLearnDetail() {
            const time = new Date(this.years).getTime();
            const learnDetail = [...this.learnDetail];
            learnDetail.forEach((item, index) => {
                this.getYearsData(item.type, time, (res) => {
                    this.learnDetail[index].course_num = res.course_num;
                    this.learnDetail[index].label_num = res.label_num;
                });
            });
        },

        // 柱状图初始化
        echartsLoopInit() {
            const data = this.learnedNodeCharts;
            const options = {...this.options};

            data.forEach(async (item, i) => {
                const itemOption = {...options};
                itemOption.series[0].data = [
                    { value: item.have_learned_num, label: {color: 'rgb(249, 191, 91)'} },
                    { value: item.completion_num, label: {color: 'rgb(91, 211, 249)'} },
                    { value: item.section_num, label: {color: 'rgb(64, 158, 255)'} },
                ];
                const echartsId = document.getElementById(`echarts${i}`);
                const chartItem = echarts.init(echartsId);
                await chartItem.setOption(itemOption);
            });
            this.chartShow = false;
        },

        onExport() {
            const versionText = this.version === 'v1' ? '' : 'v2/';
            const url = `${process.env.VUE_APP_API_PREFIX}statistics/user/export/${versionText}${this.date}/${this.id}`;
            window.location.href = url;
        },

        /*
        *  setting
        */

        // 设置日期下面的学习时间
        getMinutes(day) {
            const years = day.split('-').join('/');
            const time = new Date(years);
            const learnData = [...this.calendarData];
            const cellMonth = time.getMonth() + 1;
            const cellDay = time.getDate();

            let data = '';
            for (const item of learnData) {
                const itemTime = new Date(item.date_at);
                const itemMonth = itemTime.getMonth() + 1;
                const itemDay = itemTime.getDate();
                if (cellMonth === itemMonth && cellDay === itemDay) {
                    data = `
                        <div class="icon mb-2"></div>
                        <div class="title">${ item.content }</div>
                    `;
                }
            }

            return data;
        },
        // 切换月份
        dateChange(e, type, index) {
            let years = '';
            const learnDetail = [...this.learnDetail];

            if (type === 'calendar') years = this.years.split('/');
            if (type === 'detail') years = learnDetail[index].years.split('/');
            if (type === 'theme') years = this.themeYears.split('/');

            let year = +years[0];
            let month = +years[1];
            const day = +years[2];

            if (e === 'pre') {
                if (this.version === 'v2' && year <= 2021 && month <= 6) {
                    $ele.$message.warning('数据分析模块3.0版，统计起始时间 2021年6月1日');
                    return;
                }

                if (month === 1) {
                    month = 12;
                    year -= 1;
                } else month--;
            } else {
                if (this.version === 'v1' && year >= 2021 && month >= 5) {
                    $ele.$message.warning('查看新版本数据，请使用3.0版');
                    return;
                }

                if (month === 12) {
                    month = 1;
                    year += 1;
                } else month++;
            }

            if (month < 10) month = `0${month}`;
            const yearsDate = `${year}/${month}/${day}`;

            if (type === 'calendar') {
                this.years = yearsDate;
                this.changeCalendarData();
                this.getYearsDetail();
            }

            if (type === 'detail') {
                this.learnDetail[index].years = yearsDate;
                const timestamp = new Date(yearsDate).getTime();
                this.getYearsData(learnDetail[index].type, timestamp, (res) => {
                    this.learnDetail[index].course_num = res.course_num;
                    this.learnDetail[index].label_num = res.label_num;
                });
            }

            if (type === 'theme') {
                this.themeYears = yearsDate;
                this.getTheme();
            }
        },
        // 设置年月文案
        changeCalendarData() {
            const years = this.years.split('/');
            const yearNode = document.querySelector('.el-calendar_title-mask .year');
            const monthNode = document.querySelector('.el-calendar_title-mask .month');

            yearNode.innerText = `${years[0]}年`;
            monthNode.innerText = `${+years[1]}月`;
        },
        // 创建日历头部节点
        createCalendarHeader() {
            const monthArr = this.years.split('/');
            const headerNode = document.querySelector('#calendar .el-calendar__header');
            const delBtn = document.createElement('div');

            delBtn.innerHTML = `
                <div class="title flex justify-center items-center">
                    <div class="year font-semibold mr-4">${monthArr[0]}年</div>
                    <div class="flex justify-center items-center">
                        <i id="pre-month" class="el-icon-arrow-left mr-2 cursor-pointer"></i>
                        <span class="month w-12 text-center font-semibold">${+monthArr[1]}月</span>
                        <i id="next-month" class="el-icon-arrow-right ml-2 cursor-pointer"></i>
                    </div>
                </div>
                <div class="learn-time text-center text-sm mt-2 text-gray-500"></div>
            `;

            delBtn.className = 'el-calendar_title-mask';
            headerNode.appendChild(delBtn);

            const preBtn = document.querySelector('#pre-month ');
            const nextBtn = document.querySelector('#next-month ');

            // 设置点击事件
            preBtn.onclick = () => {
                this.dateChange('pre', 'calendar');
            };
            nextBtn.onclick = () => {
                this.dateChange('next', 'calendar');
            };
        },

        /**
         * v1版本入口
        */
        toOldVersion() {
            const newPage = this.$router.resolve({
                name: 'Staff.Home',
                params: {
                    v: 'v1',
                    id: this.id || '',
                },
            });

            // 打开新页面
            window.open(newPage.href, '_self');
        },
    },
    mounted() {
        const id = this.$route.params.id || '';
        this.version = this.$route.params.v || 'v1';

        const time = new Date();
        let dateTime = `${time.getFullYear()}/${time.getMonth() + 1}/1`;

        if (this.version === 'v1') {
            dateTime = '2021/5/1';
        }

        this.years = dateTime;
        this.themeYears = dateTime;

        this.createCalendarHeader();

        if (id) {
            this.id = id;
            this.getData();

            this.learnDetail.map(item => {
                item.years = dateTime;
                return item;
            });

            this.getLearnDetail();
            this.getTheme();
        }

        this.date = new Date(dateTime).getTime();
    },
};
</script>

<style lang="scss">
.statistics-staff-page {
    .big-title {
        font-size: 18px;
        line-height: 18px;
        font-weight: 600;
        color: rgb(51, 51, 51);
    }

    .left-icon {
        position: relative;
        padding-left: 10px;

        .little-tip {
            color: rgb(144, 147, 153);
        }
    }

    .left-icon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: #409eff;
    }

    .learn {
        .content {
            margin-top: 50px;
        }

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .number {
            font-size: 22px;
            color: #409eff;
        }

        .tip {
            margin-top: 10px;
            font-size: 14px;
            color: rgb(144, 147, 153);
        }
    }

    .active {
        position: relative;
        font-size: 14px;
        color: #000;
        font-weight: 600;
    }

    .active::after {
        content: '';
        position: absolute;
        bottom: -12px;
        left: 0;
        width: 100%;
        height: 3px;
        background: #409eff;
    }

    .our-table {
        width: 100%;

        .header {
            width: 100%;
            height: 42px;
            background: rgb(250, 250, 250);

            .header-col {
                font-size: 14px;
                color: rgb(153, 153, 153);
            }
        }

        .our-table-body {
            .column {
                font-size: 14px;
                min-height: 42px;
            }
        }

        .our-table-body-last {
            width: 100%;
            height: 42px;
            line-height: 42px;
            text-align: center;
        }

        .our-table-body-last.el-icon-caret-bottom {
            color: #409EFF;
        }

        .our-table-empty {
            height: 84px;
            line-height: 84px;
            color: rgb(190, 190, 190);
            text-align: center;
        }
    }

    .calendar-box {
        box-shadow: 0 0 10px 1px rgb(209, 209, 209);
        border-radius: 5px;
        overflow: hidden;
    }

    #calendar {
        .el-calendar__header {
            position: relative;
        }

        .el-calendar_title-mask {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;

            span {
                color: #409EFF;
            }
        }

        .el-calendar-table {
            td {
                pointer-events: none;
                background-color: white;
                border: none;
            }

            .el-calendar-day {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            td.is-today {
                color: black;
            }

            .icon {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                background: #409EFF;
            }

            .title {
                color: #409EFF;
            }

            .cell-icon-box {
                position: absolute;
                top: 16px;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                font-size: 14px;
            }
        }
    }

    .learn-theme {
        width: 250px;
        margin-right: 10px;
    }

    .echarts {
        width: 300px;
        height: 300px;
    }

    .old-version {
        padding: 0;
        border-bottom: 1px solid #409EFF;
        margin-left: 40px;
    }

    .tip-item {
        color: rgb(155, 155, 155);
    }
}

.el-tooltip__popper.is-dark {
    .tip-content {
        max-width: 400px;
    }
}
</style>
